var latitude;
var longitude;
//地图资源
var vm = new Vue({
    el: '#app',
    data: function () {
        return {
            winHeight: 0,
            r: 1500,
            point: '0,0',
            searchType: '',
            marker_datas:'',
            searchDistance: {
                "chosed": "1",
                "list": [
                    {
                        "value": "500",
                        "name": "500m"
                    },
                    {
                        "value": "1000",
                        "name": "1000m"
                    },
                    {
                        "value": "1500",
                        "name": "1500m"
                    },
                    {
                        "value": "5000",
                        "name": "5000m"
                    }
                ]
            },
            searchCate: [
                {
                    "id": "1",
                    "name": "事件",
                    "chosed": true
                },
                {
                    "id": "2",
                    "name": "公司",
                    "chosed": true
                },
                {
                    "id": "3",
                    "name": "基地",
                    "chosed": false
                },
                {
                    "id": "4",
                    "name": "车辆",
                    "chosed": true
                }
            ]
        }
    },
    mounted: function () {
        var that = this;
        mui.init({});
        mui.ready(function () {
            var h = getClientHeight();
            that.winHeight = h;
            $.ajax({
                type: 'post',
                async: false,
                url: '/getJsTicket',
                data: {url: location.href.split('#')[0]},
                success: function (data) {
                    wx.config({
                        debug: false,
                        appId: data.appId,
                        timestamp: data.timestamp,
                        nonceStr: data.noncestr,
                        signature: data.signature,
                        jsApiList: [
                            "getLocation"
                        ]
                    });
                    that.getLocation();
                    wx.error(function (res) {
                        alert(JSON.stringify(res));
                    });
                }
            });
        })
    },
    methods: {
        getLocation: function () {
            var that = this;
            wx.ready(function () {
                wx.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        that.getBaiduInfo(res.latitude, res.longitude);
                    }
                });
            });
        },
        getBaiduInfo: function (latit, longit) {
            var that = this;
            $.get("/getBaiduInfo", {'latitude': longit, 'longitude': latit}, function (data) {
                if (data.status == '201') {
                    var ude = data.data.result[0];
                    longitude = ude.x;
                    latitude = ude.y;
                    that.point = longitude + ',' +latitude;
                    that.searchType = '事件,公司,车辆';
                    that.postData();
                }
            });
        },
        loadMap: function () {
            var that = this;
            // 百度地图API功能
            var map = new BMap.Map("mapresources");
            var mPoint = new BMap.Point(longitude,latitude);
            map.enableScrollWheelZoom();
            map.centerAndZoom(mPoint, 15);
            var ctrl = new BMapLib.TrafficControl({
                showPanel: false //是否显示路况提示面板
            });
            map.addControl(ctrl);
            ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);

            var circle = new BMap.Circle(mPoint,that.r, {
                fillColor: "blue",
                strokeWeight: 1,
                fillOpacity: 0.1,
                strokeOpacity: 0.3,
                enableEditing: false
            });
            map.addOverlay(circle);

            //定位当前位置
            var marker = new BMap.Marker(mPoint);
            marker.enableDragging();
            marker.addEventListener('dragend', function (e) {//拖动标注结束
                var pointNew = e.point;
                longitude = pointNew.lng;
                latitude = pointNew.lat;
                that.point = longitude + ',' + latitude;
                that.postData();
            });
            map.addOverlay(marker);

            //向地图中添加比例尺控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);
            //向地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //向地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            if (that.marker_datas != '') {
                $.each(that.marker_datas, function (i, item) {
                    var txt = "";
                    var lng = item.lng;
                    var lat= item.lat;
                    if(item.type=="事件"){
                        lng = 	item.lat;
                        lat = item.lng;
                    }
                    var point = new BMap.Point(lng, lat);
                    var myIcon;
                    var icon_url = '';
                    if(item.type=="车辆"){
                        txt = "<div style='font-size:12px;line-height:20px'><div style='display:flex'><p style='width:80px;margin:0'>" + item.stype + "</p><p style='margin:0;padding-left:10px'>"+item.carno+"</p></div><div style='display:flex'><p style='width:80px;margin:0'>" + item.b_company + "</p><p style='margin:0;padding-left:10px'>"+item.car_type+"</p></div>";
                        icon_url = '/resources/assets/img/map/car.png';
                    }
                    if(item.type=="基地"){
                        txt ="<div style='display:table; height:100px'><p style='display:table-cell;font-size:12px; vertical-align:middle;'>" + item.name + "</br>"+item.address+"</p></div>";
                        icon_url = '/resources/assets/img/map/base.png';
                    }
                    if(item.type=="公司"){
                        txt ="<div style='display:table; height:100px'><p style='display:table-cell;font-size:12px; vertical-align:middle;'>" + item.name + "</br>"+item.address+"</p></div>";
                        icon_url = '/resources/assets/img/map/company.png';
                    }
                    if(item.type=="事件"){
                        point = new BMap.Point(item.lat, item.lng);
                        txt='<div style="display: inline-block; padding: 10px;border-radius: 5px;background-color: #fff;color: #333; max-width: 80%;min-width: 200px;position: relative;font-size: 13px;">' +
                            ' <p style="">发起人：' + item.userName + '</p>' +
                            '<p style="">' + item.createTime + '</p>' +
                            '<p style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + item.comment + '</p>' +
                            '<p style="overflow: hidden;">共' + (item.new + 1) + '条信息' +
                            '<a href="eventReporting-content.html?eventId=' + item.id + '" style="display: inline-block;color: #20A0FF;float: right; text-decoration: underline;">事件详情</a>' +
                            '</p></div>';
                        icon_url = '/resources/assets/img/map/event.png';
                    }
                    var myIcon = new BMap.Icon(icon_url, new BMap.Size(27,25));
                    var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
                    var info = new window.BMap.InfoWindow(txt);
                    marker.addEventListener("click", function () {
                        this.openInfoWindow(info);
                    });
                    map.addOverlay(marker);
                });
            }
        },
        bindChoseRidus: function (item) {
            var that = this;
            var value = item.value;
            that.searchDistance.chosed = value;
            that.r = value;
        },
        //搜索半径确定事件
        doRadiusFilter:function() {
            var that=this;
            mui('#sRadiusMenu').popover('toggle');
            that.postData();
        },
        //搜索内容多选事件
        bindChoseContent: function(index) {
            var that = this;
            var item = that.searchCate[index];
            item.chosed = !item.chosed;
        },
        //搜索内容多选确定事件
        doContentFilter:function() {
            var that=this;
            mui('#sContentMenu').popover('toggle');
            var type = [];
            $.each(that.searchCate, function(i, item) {
                if(item.chosed) {
                    type.push(item.name);
                }
            });
            that.searchType = type.join(',');
            that.postData(); //提交数据 更新地图回调中执行that.loadMap()
        },
        postData: function () {
            var that = this;
            $.getJSON('/tunnel/getTunnelBaseList', {
                "point":that.point,
                "r": that.r,
                "searchType": that.searchType
            }, function (data) {
                that.marker_datas = data;
                that.loadMap();
            })
        }
    }
})